<template>
  <div class="container">
    <!-- 这里是 licenseSelect 页面的基础结构 -->
    <div class="title">协议工检索</div>
    <div>
        <el-input @keyup.enter="handleSearch" placeholder="请输入协议工姓名 或者 身份信息" v-model="searchName" style="width: 300px; margin-bottom: 20px;" />
        <el-button :loading="searching" @click="handleSearch" style="margin-left: 10pt;" type="primary">搜索</el-button>
    </div>
    <!-- 结果显示区 -->
    <div>
        <el-card v-if="user">
            <template slot="header">
                <span>协议工信息</span>
            </template>
            <div>
                <p>姓名：{{user.workerName}}</p>
                <p>身份证号：{{user.workerIdcard}}</p>
                <p>状态：<span :style="{color:user.isValid?'green':'red'}">{{user.isValid?'有效':'无效'}}</span></p>
                <p>有效时间：{{user.startTime}} - {{user.endTime}}</p>
            </div>
        </el-card>
        <el-card v-else-if="showNull">
            <template slot="header">
                <span>未找到协议工</span>
            </template>
        </el-card>
    </div>
  </div>
</template>

<script>
import {selectPage} from "@/api/contractWorker"
export default {
  name: 'LicenseSelect',
  data(){
    return {
        searchName: '',
        searching : false,
        user : undefined,
        showNull : false,
    }
  },
  methods:{
    handleSearch(){
        
        if(this.searchName.length==0){
            this.$message.error('请输入身份证')
            return;
        }
        this.searching = true ;
        this.user = undefined;
        this.showNull = false;
        console.log(this.searchName)
        
        selectPage({workerIdcard:this.searchName,size:1,page:1}).then(res=>{
            const {success, data, msg} = res;
            if(success && data.records.length>0){
                this.user = data.records[0];
            }else{
                this.showNull = true ;
                this.$message.error(msg)
            }
        }).finally(()=>{
            this.searching = false;
        })
    }
  }
}
</script>

<style scoped>
h1 {
  color: #333;
}
.container {
    padding: 20pt;
}
.title {
    font-size: 20pt;
    font-weight: bold;
    margin-bottom: 20pt;
}
</style>
